<template>
  <div class="box">
    <div>
      <headers index = "6"></headers>
    </div>
    <div class="concent">
       <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column prop="wx" :label="$t('wx')" align="center" min-width="180"></el-table-column>
          <el-table-column prop="email" label="email" align="center" min-width="180"></el-table-column>
          <el-table-column prop="kakao" label="kakao" align="center" min-width="180"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 200, 300, 400]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    index_service
  } from '@/utils/wqzApi'
  import headers from "@/components/header"
  export default {
      components:{
        headers,
      },
      data() {
        return {
          tableData:[{}],
          page:1,
          limit:10,
          total:0
        }
      },
      mounted() {
        this.getList()
      },
      methods:{
        handleSizeChange(e){
          this.limit = e
          this.getList()
        },
        handleCurrentChange(e){
          this.page = e
          this.getList()
        },
        getList(){
          var data = {
            "page": this.page, //页码
            "limit": this.limit, //条数
          }
          index_service(data).then(res=>{
            console.log(res)
            this.tableData = res.data.list
            this.total = res.data.count
          })
        }
      }

  }
</script>

<style lang="scss" scoped >
  .concent{
    width: 100%;
    min-height: 80vh;
    padding: 2vw;
    box-sizing: border-box;
  }
</style>
